<template>
    <div class="card-container" v-loading="loading">
        <el-row class="main-view" :gutter="20">
            <el-col :span="11">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>设备预警数</span>
                        </div>
                    </template>
                    <div class="echart-container" ref="yujingRef"></div>
                </el-card>
            </el-col>
            <el-col :span="11">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>设备盘点</span>
                        </div>
                    </template>
                    <div class="echart-container" ref="pandianRef" ></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { pandianDetail, yujingDetail } from "@/api/system/analysis";
import * as echarts from "echarts/core";
//
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
// 饼
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { onMounted, ref } from "vue";
const yujingRef = ref(null)
const pandianRef = ref(null)
echarts.use([
    GridComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout,
]);

const setYujingDetail = async () => {
    const response = await yujingDetail();
    console.log("🚀 ~ file: index.vue:62 ~ setYujingDetail ~ response:", response)
    const nameData = response.rows.map(i=>i.interfaceType)
    const valueData = response.rows.map(i=>i.alarmCnt)
    const yujingChart = echarts.init(yujingRef.value, "macarons");
    yujingChart.setOption({
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: nameData,
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data:valueData,
                type: "line",
                areaStyle: {},
            },
        ],
    });

}
const setPandianDetail = async () => {
    const response = await pandianDetail();
    console.log("🚀 ~ file: index.vue:66 ~ setPandianDetail ~ response:", response)
    const resObj = response.rows[0]
    const data = [{ value: resObj.makeCnt, name: "领用数量" },
    { value: resObj.repairCnt, name: "维护数量" },
    { value: resObj.turnCnt, name: "转移数量" },
    { value: resObj.disposeCnt, name: "处置数量" }]
    const pandianChart = echarts.init(pandianRef.value, "macarons");
    pandianChart.setOption({
       
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "vertical",
            left: "left",
        },
        series: [
            {
                name: "设备盘点",
                type: "pie",
                radius: "50%",
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
    });

}

setYujingDetail();
setPandianDetail();
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>